<template>
  <div class="login">
    <el-row class="row">
      <el-col :xl="6" :md="8" :sm="12" :xs="22" class="login-con blog-animation">
        <div class="login-img">
          <!--          <img src="~@/assets/logo.svg"/>-->
        </div>
        <p class="login-welcome">欢迎注册！</p>
        <el-form status-icon autocomplete="off">
          <el-form-item>
            <el-input
                prefix-icon="el-icon-user"
                type="text"
                placeholder="昵称"
                v-model="formCustom.nickname"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
                style="width:100%"
                prefix-icon="el-icon-phone"
                type="text"
                placeholder="手机号"
                v-model="formCustom.phone"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
                prefix-icon="el-icon-lock"
                type="password"
                placeholder="密码"
                v-model="formCustom.password"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
                prefix-icon="el-icon-lock"
                type="password"
                placeholder="确认密码"
                v-model="formCustom.checkPass"
                autocomplete="off"
            ></el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button v-loading="loading" class="btn" @click="login()">注册</el-button>
            <div class="a-tag user">
              <!--              <router-link to="/forget">找回密码</router-link>-->
              <router-link to="/login">立即登录</router-link>
            </div>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// document.getElementsByTagName("input")[0].setAttribute("autocomplete", "off")
</script>
<script>

export default {
  name: "Sign",
  data() {
    return {
      loading: false,
      restaurants: [],
      formCustom: {
        nickname: "",
        password: "",
        checkPass: "",
        phone: "",
      },
    };
  },
  methods: {
    phoneFun(phones) {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(phones)) {
        console.log('手机号格式不正确')
        return false;
      } else {
        console.log('手机号格式正确')
        return true;
      }
    },
    login() {
      if (this.formCustom.phone == "" || this.formCustom.nickname == "" || this.formCustom.password == "" || this.formCustom.checkPass == "") {
        this.$message.error("请输入全部信息！！")
        return
      }
      if (!this.phoneFun(this.formCustom.phone)) {
        this.$message.error("请输入正确手机号！！")
        return
      }
      if (this.formCustom.password != this.formCustom.checkPass) {
        this.$message.error("两次密码输入不一致！！")
        return
      }
      this.$http.post("/login/register", this.formCustom).then(async data => {
        console.log(data)
        if (data.code == 400) {
          this.$message.error(data.message)
          this.formCustom = {
            nickname: "",
            password: "",
            checkPass: "",
            phone: "",
          }
        } else {
          await this.$message.success("成功注册")
          this.$router.push("/login")
        }
      })
    },
    querySearch(queryString, callback) {
      let restaurants = this.restaurants;
      let results = JSON.parse(JSON.stringify(restaurants)); //把数组的浅复制换成深复制
      for (let item in results) {
        results[item].value =
            queryString.split("@")[0] + "" + restaurants[item].value;
      }
      callback(results);
    },
    loadAll() {
      return [
        {value: "@qq.com"},
        {value: "@126.com"},
        {value: "@163.com"},
        {value: "@sohu.com"},
      ];
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/style/login.styl';

.row {
  min-height: 680px;
}
</style>